<template>
  <div class="easyd-weixin-Box">
    <div class="addUserCategoryBox">
      <div class="addUserCategoryBtn" @click="goAddUserCategory">
        <i class="fa fa-reorder fa-lg"></i>新增用户分类
      </div>
    </div>
    <div class="userListBox">
      <mt-loadmore
        :top-method="loadTop"
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
      >
        <div class="userCategoryAndListItem">
          <div class="userCategoryContent">
            <div class="userCategoryContentName">
              <i class="fa fa-group fa-lg"></i>未归类客户（ 3人 ）
            </div>
            <div class="userCategoryContentSelect">
              <i class="fa fa-check-circle-o fa-lg"></i>选中该类全部
            </div>
          </div>
          <div class="userListItem" v-for="i in 3">
            <div class="userListHeader">
              <img :src="imageDemoUrl" v-lazy="imageDemoUrl" v-gallery>
            </div>
            <div class="userListName">张三的梦</div>
          </div>
        </div>

        <div class="userCategoryAndListItem">
          <div class="userCategoryContent">
            <div class="userCategoryContentName">
              <i class="fa fa-truck fa-lg"></i>家电数码（ 2人 ）
            </div>
            <div class="userCategoryContentSelect">
              <i class="fa fa-check-circle-o fa-lg"></i>选中该类全部
            </div>
          </div>
          <div class="userListItem" v-for="i in 2">
            <div class="userListHeader">
              <img :src="imageDemoUrl" v-lazy="imageDemoUrl" v-gallery>
            </div>
            <div class="userListName">张三的梦</div>
          </div>
        </div>

        <div class="userCategoryAndListItem">
          <div class="userCategoryContent">
            <div class="userCategoryContentName">
              <i class="fa fa-shower fa-lg"></i>母婴用品（ 20人 ）
            </div>
            <div class="userCategoryContentSelect">
              <i class="fa fa-check-circle-o fa-lg"></i>选中该类全部
            </div>
          </div>
          <div class="userListItem" v-for="i in 5">
            <div class="userListHeader">
              <img :src="imageDemoUrl" v-lazy="imageDemoUrl" v-gallery>
            </div>
            <div class="userListName">张三的梦</div>
          </div>
        </div>
      </mt-loadmore>
    </div>
    <div class="userMessageBottom">
      <div class="userMessageSelect">
        <div class="userMessageSelectClick">
          <i class="fa fa-check-circle-o fa-lg"></i>全选
          <span>选中 ( 20 ) 人</span>
        </div>
      </div>
      <div class="userMessageSend" @click="goSendPrivate">发送私信</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allLoaded: false,
      imageDemoUrl:
        "http://testfileupload.oss-cn-beijing.aliyuncs.com/header_test.png"
    };
  },
  methods: {
    loadTop() {
      setTimeout(() => {
        this.$refs.loadmore.onTopLoaded();
      }, 2000);
    },
    loadBottom() {
      setTimeout(() => {
        this.allLoaded = true;
        this.$refs.loadmore.onBottomLoaded();
      }, 5000);
    },
    goAddUserCategory(){
      this.$router.push({
        path : '/addUserCategory'
      })
    },
    goSendPrivate(){
      this.$router.push({
        path : '/sendPrivate'
      })
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS'
.userListBox {
  position: absolute;
  bottom: 50px;
  left: 0px;
  top: 80px;
  right: 0px;
  overflow: auto;
  -webkit-overflow-scrolling : touch;

  .userCategoryAndListItem {
    width: 100%;
    height: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;

    .userListItem {
      width: 100%;
      height: 60px;
      margin-bottom: 15px;
      border-radius: 5px;
      box-sizing: border-box;
      $itemStyle()

      .userListHeader {
        width: 40px;
        height: 40px;
        margin: 10px;
        float: left;

        img {
          width: 100%;
          height: 100%;
          border-radius: 5px;
          border: 1px solid #ddd;
          object-fit: cover;
        }
      }

      .userListName {
        float: left;
        height: 60px;
        line-height: 60px;
      }
    }

    .userCategoryContent {
      width: 100%;
      height: 40px;
      padding-left: 5px;
      padding-right: 5px;
      line-height: 40px;
      box-sizing: border-box;

      .userCategoryContentName {
        width: 50%;
        font-weight: 500;
        font-size: 14px;
        color: orange;
        float: left;

        i {
          font-size: 14px;
          position: relative;
          top: -2px;
          margin-right: 5px;
        }
      }

      .userCategoryContentSelect {
        width: 50%;
        float: right;
        text-align: right;

        i {
          font-size: 16px;
          color: #999;
          position: relative;
          top: -1px;
          margin-right: 5px;
        }
      }
    }
  }
}

.userMessageBottom {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background #fff
  right: 0px;
  border-top: 1px solid #eee;
  height: 50px;

  .userMessageSelectClick {
    width: auto;
    height: 50px;
    line-height: 50px;
    padding-left: 15px;

    span {
      margin-left: 20px;
    }

    i {
      font-size: 16px;
      color: #999;
      position: relative;
      top: -1px;
      right: 8px;
    }
  }

  .userMessageSelect {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 100px;
    height: 50px;
  }

  .userMessageSend {
    width: 100px;
    height: 50px;
    background: #FDDE6E;
    line-height: 50px;
    text-align: center;
    float: right;
  }
}

.addUserCategoryBox {
  width: 100%;
  height: 50px;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 15px;
  box-sizing: border-box;

  .addUserCategoryBtn {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    text-align: center;
    line-height: 50px;
    $itemStyle()

    i {
      color: #999;
      font-size: 14px;
      position: relative;
      top: -2px;
      right: 10px;
    }
  }
}
</style>

